<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./cart.css" />
</head>

<body>
    <div class="box">
        <div class="container">
            <my-cart></my-cart>
        </div>
    </div>

    <script src="./js/vue.js"></script>

    <script>
        var CartTitle = {
            props: ["name"],
            template: `
        <div class="title">{{name}}的商品</div>
      `,
        };

        var CartList = {
            props: ["list"],
            template: `
        <div>
          <div class="item" v-for="item in list" :key="item.id">
            <img :src=item.img />
            <div class="name">{{item.name}}</div>
            <div class="change">
              <a href="" @click.prevent="sub(item.id,$event)">－</a>
              <input type="text" class="num" :value="item.num" @keyup.enter="changeItem(item.id,$event)"/>
              <a href="" @click.prevent="add(item.id,$event)">＋</a>
            </div>
            <div class="del" @click="$emit('delList',item.id)">×</div>
          </div>
        </div>
      `,
            methods: {
                changeItem: function(id, e) {
                    // console.log(id, e.target.value);
                    this.$emit("change-item", {
                        id: id,
                        type: "change",
                        num: e.target.value,
                    });
                },
                sub: function(id, e) {
                    this.$emit("change-item", {
                        id: id,
                        type: "sub",
                        num: e.target.value,
                    });
                },
                add: function(id, e) {
                    this.$emit("change-item", {
                        id: id,
                        type: "add",
                        num: e.target.num,
                    });
                },
            },
        };

        var CartTotal = {
            props: ["total"],
            template: `
          <div class="total">
            <span>总价：{{totaPrice}}</span>
            <button>结算</button>
          </div>
      `,
            computed: {
                totaPrice: function() {
                    var price = 0;
                    this.total.forEach((item) => {
                        price += item.price * item.num;
                    });
                    return price;
                },
            },
        };

        Vue.component("my-cart", {
            data: function() {
                return {
                    uname: "进进",
                    list: [{
                        id: 1,
                        name: "TCL彩电",
                        price: 1000,
                        num: 1,
                        img: "img/a.jpg",
                    }, {
                        id: 2,
                        name: "机顶盒",
                        price: 1000,
                        num: 1,
                        img: "img/b.jpg",
                    }, {
                        id: 3,
                        name: "海尔冰箱",
                        price: 1000,
                        num: 1,
                        img: "img/c.jpg",
                    }, {
                        id: 4,
                        name: "小米手机",
                        price: 1000,
                        num: 1,
                        img: "img/d.jpg",
                    }, {
                        id: 5,
                        name: "PPTV电视",
                        price: 1000,
                        num: 2,
                        img: "img/e.jpg",
                    }, ],
                };
            },
            template: `
              <div class="cart">
                <cart-title :name="uname"></cart-title>
                <cart-list :list="list" @delList="delHandle($event)" @change-item="changeHandle($event)""></cart-list>
                <cart-total :total="list"></cart-total>
              </div>
            `,
            methods: {
                delHandle: function(id) {
                    // console.log(id)
                    var delId = this.list.findIndex((item) => {
                        return item.id === id;
                    });
                    //findIndex函数返回的是符合条件的索引
                    this.list.splice(delId, 1);
                },
                changeHandle: function(e) {
                    // console.log(e);
                    if (e.type === "change") {
                        this.list.some((item) => {
                            if (item.id === e.id) {
                                item.num = e.num;
                                return true;
                                //找符合条件的原素，找到返回true找不到返回false
                            }
                        });
                    } else if (e.type === "add") {
                        this.list.some((item) => {
                            if (item.id === e.id) {
                                item.num += 1;
                                return true;
                                //找符合条件的原素，找到返回true找不到返回false
                            }
                        });
                    } else if (e.type === "sub") {
                        this.list.some((item) => {
                            if (item.id === e.id) {
                                item.num -= 1;
                                return true;
                                //找符合条件的原素，找到返回true找不到返回false
                            }
                        });
                    }
                },
            },
            components: {
                "cart-title": CartTitle,
                "cart-list": CartList,
                "cart-total": CartTotal,
            },
        });

        var vm = new Vue({
            el: ".box",
            data: {},
        });
    </script>
</body>

</html>